<template>
    <div class="level">
        <div class="Left">
            <h1>医院</h1>
            <div class="content">
                <div class="middle">
                    <div class="left">等级:</div>
                    <ul>
                        <li :class="{ active: activeFlag == '' }" @click="changeLevel('')">全部</li>
                        <li v-for="level in levelArr" :class="{ active: activeFlag == level.value }" :key="level.value"
                            @click="changeLevel(level.value)">{{ level.name }}</li>
                    </ul>
                </div>
                <div class="bottom">
                    <div class="left">地区:</div>
                    <ul>
                        <li :class="{ active: activeFlag2 == '' }" @click="changeRegion('')">全部</li>
                        <li v-for="region in RegionArr" :key="region.value" :class="{ active: activeFlag2 == region.value }"
                            @click="changeRegion(region.value)">{{ region.name }}</li>
                    </ul>
                </div>
            </div>
            <div class="Left_card">
                <Card class="item" v-for="(item, index) in hospitalList" :key="index" :hospitalInfo="item" />
            </div>
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 40]" :small="small" :disabled="disabled" :background="background"
                layout="  prev, pager, next, jumper,sizes,total," :total="total" @current-change="currentChange"
                @size-change="sizeChange" />
        </div>
        <div class="right">
            <Tip/>
        </div>
    </div>
</template>
<script setup lang="ts">
import Card from './Card/index.vue';
import Tip from '../Tip/index.vue';
import type { Content, HospitalResponseData, HospitalLevelAndRegionResponseData, HospitalLevelAndRegionArr } from '@/api/home/type'
import { ref, onMounted } from 'vue'
import { reqHospital, reqHospitalLevelAndRegion } from '@/api/home';
const currentPage = ref<number>(1)
const pageSize = ref<number>(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
//医院数据
let hospitalList = ref<Content>([])
//等级数据
let levelArr = ref<HospitalLevelAndRegionArr>([])
//医院个数
const total = ref<number>(0)
//存储医院等级相应数据
let hostype = ref<string>('')
//存储医院的地区
let districtCode = ref<string>('')
//控制医院等级高亮响应式数据
let activeFlag = ref<string>('')
let activeFlag2 = ref<string>('')
//存储地区的数据
let RegionArr = ref<HospitalLevelAndRegionArr>([])
//获取医院数据
const getHospitalInfo = () => {
    reqHospital(currentPage.value, pageSize.value, hostype.value, districtCode.value)
        .then((res: any) => {
            if (res.code === 200) {
                hospitalList.value = res.data.content;
                total.value = res.data.totalElements;
            }
        }).catch((error: any) => {
            console.error('Error:', error);
        });
}
//获取医院等级数据
const getLevel = async () => {
    let res: HospitalLevelAndRegionResponseData = await reqHospitalLevelAndRegion('HosType')
    console.log(res);
    if (res.code === 200) {
        levelArr.value = res.data
    }

}
//获取地区数据
const getRegion = async () => {
    await reqHospitalLevelAndRegion('Beijin').then((res: HospitalLevelAndRegionResponseData) => {
        console.log(res);
        if (res.code === 200) {
            RegionArr.value = res.data
        }
    })
}
//分页器页码发生变化时的回调
const currentChange = () => {
    getHospitalInfo();
}
//分压器下拉菜单发生变化时的回调
const sizeChange = () => {
    getHospitalInfo();
}
//点击等级切换
const changeLevel = (level: string) => {
    console.log(level);
    activeFlag.value = level;
    hostype.value = level;
    getHospitalInfo();
}
//点击切换地区
const changeRegion = (region: string) => {
    console.log(region);
    activeFlag2.value = region;
    districtCode.value = region;
    getHospitalInfo();
}
onMounted(() => {
    //医院数据
    getHospitalInfo();
    //等级
    getLevel();
    //地区
    getRegion();
})
</script>
<style scoped lang="scss">
.level {
    background-color: #4490F1;

    h1 {
        font-weight: 900;
        margin: 10px 0px;
        width: 100px;
    }

    .Left {
        width: 894px;
        float: left;

        .content {
            display: flex;
            flex-direction: column;

            .middle {
                width: 894px;

                .left {
                    width: 50px;
                    float: left;
                    color: #7f7f7f;
                }

                ul {
                    width: 500px;
                    display: flex;
                    justify-content: space-between;
                    color: #333333;
                    font-size: 14px;

                    li:hover {
                        color: #4490F1;

                    }

                    .active {
                        color: #4490F1;
                    }
                }

            }

            .bottom {
                margin-top: 10px;

                .left {
                    width: 50px;
                    float: left;
                    color: #7f7f7f;
                }

                ul {
                    display: flex;
                    flex-wrap: wrap;

                    li {
                        color: #333333;
                        font-size: 14px;
                        margin-right: 30px;
                        margin-bottom: 10px;

                        &:hover {
                            color: #4490F1;
                        }

                        &.active {
                            color: #4490F1;
                        }
                    }
                }
            }
        }

        .Left_card {
            width: 894px;
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .item {
                width: 48%;
                margin: 10px 0;
            }
        }
    }

    .right {
        float: left;
        width: 200px;
        margin-left: 100px;
        display: flex;
        flex-direction: column;
    }
}
</style>
